<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- <link rel="stylesheet" href="result.css"> -->
    <style>* {
  font-family: Arial, Helvetica, sans-serif;
}
.ut-flex {
  display: flex;
}
.ut-flex-1 {
  flex: 1 1 0%;
}
.ut-flex-auto {
  flex: 1 1 auto;
}
.ut-flex-initial {
  flex: 0 1 auto;
}
.ut-flex-none {
  flex: none;
}
.ut-flex-row {
  flex-direction: row;
}
.ut-flex-col {
  flex-direction: column;
}
.ut-flex-grow-0 {
  flex-grow: 0;
}
.ut-flex-grow {
  flex-grow: 1;
}
.ut-flex-shrink-0 {
  flex-shrink: 0;
}
.ut-flex-shrink {
  flex-shrink: 1;
}
.ut-justify-center {
  justify-content: center;
}
.ut-justify-between {
  justify-content: space-between;
}
.ut-justify-around {
  justify-content: space-around;
}
.ut-justify-evenly {
  justify-content: space-evenly;
}
.ut-items-center {
  align-items: center;
}
.ut-w-1-2 {
  width: 50%;
}
.ut-w-1-3 {
  width: cal(1/3);
}
.ut-w-1-4 {
  width: cal(1/4);
}
.ut-w-1-5 {
  width: cal(1/5);
}
.ut-w-1-6 {
  width: cal(1/6);
}
table.dataframe {
  border: none;
  border-collapse: collapse;
}
table.dataframe * {
  border: none;
}
table.dataframe thead tr:last-of-type {
  border-bottom: 1px solid #000;
}
table.dataframe thead {
  background: #0073c2;
  color: whitesmoke;
}
table.dataframe thead th {
  text-align: center;
}
table.dataframe td,
table.dataframe th {
  padding: 0.3rem;
}
table.dataframe tbody tr {
  cursor: pointer;
  transition: 0.2s;
}
table.dataframe tbody tr:nth-of-type(2n) {
  background: lightgray;
}
table.dataframe tbody tr:hover {
  background: #d3eefd;
}
table.dataframe tbody tr td {
  text-align: center;
}
svg {
  overflow: visible;
}</style>

    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.8.1"></script>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
    
</head>

<body>

    
    <div class="template">
        <h1>多图输出：</h1>
    </div>
    
    <div class="template">
        <div class="ut-flex ut-justify-center">
    <div id="vis-a27573f6-8c4b-41e7-84f9-e8bb196df62b"></div>
<script>
    (function (vegaEmbed) {
        var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 400
    }
  },
  "data": {
    "name": "data-f97058e015c125766f945a9329d8ba60"
  },
  "datasets": {
    "data-f97058e015c125766f945a9329d8ba60": [
      {
        "name": "a",
        "value": 1
      },
      {
        "name": "b",
        "value": 2
      },
      {
        "name": "c",
        "value": 3
      }
    ]
  },
  "encoding": {
    "x": {
      "field": "name",
      "type": "nominal"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    }
  },
  "mark": "bar"
};
        var embedOpt = { "mode": "vega-lite", renderer: "svg",actions:false };

    function showError(el, error) {
        el.innerHTML = ('<div class="error" style="color:red;">'
            + '<p>JavaScript Error: ' + error.message + '</p>'
            + "<p>This usually means there's a typo in your chart specification. "
            + "See the javascript console for the full traceback.</p>"
            + '</div>');
        throw error;
    }
    const el = document.getElementById('vis-a27573f6-8c4b-41e7-84f9-e8bb196df62b');
    vegaEmbed("#vis-a27573f6-8c4b-41e7-84f9-e8bb196df62b", spec, embedOpt)
        .catch(error => showError(el, error));
  }) (vegaEmbed);

</script>
</div>
    </div>
    
    <div class="template">
        <div class="ut-flex ut-justify-center">
    <style  type="text/css" >
</style><table id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5f" class='dataframe'><thead>    <tr>        <th class="blank level0" ></th>        <th class="col_heading level0 col0" >name</th>        <th class="col_heading level0 col1" >value</th>    </tr></thead><tbody>
                <tr>
                        <th id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5flevel0_row0" class="row_heading level0 row0" >0</th>
                        <td id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5frow0_col0" class="data row0 col0" >a</td>
                        <td id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5frow0_col1" class="data row0 col1" >1</td>
            </tr>
            <tr>
                        <th id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5flevel0_row1" class="row_heading level0 row1" >1</th>
                        <td id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5frow1_col0" class="data row1 col0" >b</td>
                        <td id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5frow1_col1" class="data row1 col1" >2</td>
            </tr>
            <tr>
                        <th id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5flevel0_row2" class="row_heading level0 row2" >2</th>
                        <td id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5frow2_col0" class="data row2 col0" >c</td>
                        <td id="T_2650c11c_d1d3_11eb_ae0d_c858c009ba5frow2_col1" class="data row2 col1" >3</td>
            </tr>
    </tbody></table>
</div>
    </div>
    
</body>

</html>